<template>
	<view class="allcasePage">
		<view class="tab" :style="{paddingTop: statusBarHeight + 'px'}">
			<view class="flex flex-between align-center tabbar"  >
				<image src="../../static/images/bb1_03.png" mode="" class="back" @click="back1"></image>
				<view class="">{{type==1?'我的上报':type==2?'已办案件':'督办案件'}}</view>
				<view class="rightSide">
					<image src="../../static/images/bb1_05.png" mode="" class="maps" @click="openMap"></image>
					<image src="../../static/images/menu.png" mode=""   class="slect" @click="selectBtn"></image>
				</view>
			</view>
			<view class="top-tab"></view>
		</view>
		<!-- 搜索 -->
		<view class="uni-form">
			<view class="uni-form-item uni-column">
				<input
					type="text"
					name="eventName"
					class="uni-input"
					v-model="data.eventName"
					placeholder="请输入查找案件名称"
					autocomplete="off" />
				<image
					@click="searchEvent"
					src='../../static/images/daban1_11.png'
					class="icon_close">
				</image>
			</view>
		</view>
		
		<view class="allCaseList">
			<view class="flex center" v-if="eventData.length==0">暂无数据</view>
			<view class="caseList" v-for="(item,index) in eventData" 
			:key="index">
				<view class="oimage">
					<image
						v-if="item.smallImgData && item.smallImgData.length > 0"
						:src="img_item"
						v-for="(img_item, img_index) in item.smallImgData"
						:key="img_index"
						@click="seeImages(img_index, item.bigImgData)"
						mode="aspectFit">
					</image>
					<!-- <image src="../../static/images/daiban_09.png" mode=""></image> -->
				</view>
				<view class="case-right"  @click="todetail(item)">
					<view class="flex case-top">
						<view class="right-rig">
							<view class="f18 color_45 f_hides" style="width: 145px;">{{item.eventTypeLv2Name}}</view>
							<view class="flex">
								<view class="bg2 bg" v-if="item.slowStatus>0"
								>缓办</view>
								<view class="bg1 bg" v-if="item.delayStatus>0"
								>延期</view>
								<block v-if="item.archivesTypeLeveThree">
									<view class="bg3 bg" v-if="(item.archivesTypeLeveThree.isJj&&item.archivesTypeLeveThree.isJj==1)||
									(item.archivesTypeLeveThree.isTf&&item.archivesTypeLeveThree.isTf==1)"
									>紧急</view>
								</block>
								<view class="bg4 bg" v-if="item.shuntStatus>0"
								>督办</view>
							</view>
						</view>
						<view class="returns">{{fliterNum(item.eventDealStatus)}}</view>
					</view>
					<view class="color_76 f_hide2">案件描述：{{item.eventDescribe}}</view>
					<view class="flex flex-between">
						<view class="color_76 f_hides" style="width: 200px;">案件地址：{{item.eventAddress}}</view>
						<image src="../../static/images/dw1_03.png" mode="" class="addres" @click.stop="mapLive(item)"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出框搜索 -->
		<view class="taskBox" v-if="isShows">
			<view class="carial"></view>
			<view class="taskSearch">
				<view class="line flex">
					<view class="label-left mr20">距&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;离</view>
					<view class="flex">
						<label class="mr10 f12"><radio value="0" class="radios" :checked="sub==0" @click="chang('sub',0)"/>50m</label>
						<label class="mr10 f12"><radio value="1" class="radios" :checked="sub==1" @click="chang('sub',1)"/>100m</label>
						<label class="mr10 f12"><radio value="2" class="radios" :checked="sub==2" @click="chang('sub',2)"/>150m</label>
					</view>
				</view>
				<view class="line flex">
					<view class="label-left mr20">是否督办</view>
					<view class="flex">
						<label class="mr20"><radio value="0" class="radios" :checked="sub0==0" @click="chang('sub0',0)"/>是</label>
						<label class="mr20"><radio value="1" class="radios" :checked="sub0==1" @click="chang('sub0',1)"/>否</label>
					</view>
				</view>
				<view class="line flex">
					<view class="label-left mr20">是否超时</view>
					<view class="flex">
						<label class="mr20"><radio value="0" class="radios" :checked="sub1==0" @click="chang('sub1',0)"/>是</label>
						<label class="mr20"><radio value="1" class="radios" :checked="sub1==1" @click="chang('sub1',1)"/>否</label>
					</view>
				</view>
				<view class="line flex">
					<view class="label-left mr20">是否突发</view>
					<view class="flex">
						<label class="mr20"><radio value="0" class="radios" :checked="sub2==0" @click="chang('sub2',0)"/>是</label>
						<label class="mr20"><radio value="1" class="radios" :checked="sub2==1" @click="chang('sub2',1)"/>否</label>
					</view>
				</view>
				<view class="line flex">
					<view class="label-left mr20">是否紧急</view>
					<view class="flex">
						<label class="mr20"><radio value="0" class="radios" :checked="sub3==0" @click="chang('sub3',0)"/>是</label>
						<label class="mr20"><radio value="1" class="radios" :checked="sub3==1" @click="chang('sub3',1)"/>否</label>
					</view>
				</view>
			</view>
			<view class="flex tewoBtn flex-around">
				<view class="reset" @click="reset">重置</view>
				<view class="reset" @click="canal">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {geteventdeal,getMyeventCase,getEventlistBydu} from '../../util/api.js'
	import filters from '../../common/getTimeqj.js'
	import URL from '../../util/url.js'
	export default {
		data() {
			return {
				sub:0,
				sub0:0,
				sub1:0,
				sub2:0,
				sub3:0,
				imgUrl: URL.IMAGEURL1,
				isShows:false,
				userInfor:uni.getStorageSync('userInfor'),
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				data:{
					pageSize: 5,
					pageNum: 1,
					createUser:'',
					eventName:'', //案件名称
					length:'',
					gdx:'108.938049',
					gdy:'34.230117',
					dealLimitTime:'', //是否超時
					isTf:'',
					isJj:'',
					
				},
				eventData:[],
				total: 0,
				status: 'loading',
				type:'',
			}
		},
		onLoad(e) {
			let _this = this;
			
			this.userInfor = uni.getStorageSync('userInfor');
			this.data.createUser = uni.getStorageSync('userInfor').userId;
			this.type = e.type;
			this.getMycasehanding();
			//type1 我的上报  type2 已办案件
			// #ifdef APP-PLUS
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					_this.data.gdy = res.latitude;
					_this.data.gdx = res.longitude;
				}
			})
			// #endif
		},
		methods: {
			fliterNum(e){
				var msg;
				switch (e) {
					case '0101':
					msg = '待核实';break
					case '0102':
					msg = '待核实';break
					case '0103':
					msg = '待转办';break
					case '0104':
					msg = '已回退';break
					case '0201':
					msg = '派遣中';break
					case '0202':
					msg = '待处置';break
					case '0203':
					msg = '待回转';break
					case '0205':
					msg = '待审核';break
					case '0206':
					msg = '待核查';break
					case '0207':
					msg = '待核查';break
					case '0208':
					msg = '待结案';break
					case '0209':
					msg = '结案';break
					case '0001':
					msg = '销案';break
					case '0002':
					msg = '销案';break
					case '0003':
					msg = '缓办';break
					case '0004':
					msg = '挂起';break
				}
				return msg;
			},
			chang(name,e){
				this[name] = e;
			},
			//打开小图标地图
			openMap(){
				//pagetype  1上报 2已办案件 3督办案件
				uni.navigateTo({
					url:'/pages/map/caseHandMap?eventDealStatus='+this.data.eventDealStatus+"&type="+1+"&pageType="+this.type
				})
			},
			mapLive(e){
				uni.navigateTo({
					url:'/pages/map/caseHandMap?eventDealStatus='+this.data.eventDealStatus+"&type="+2+"&eventId="+e.eventId+"&pageType="+this.type,
				})
			},
			//案件列表查看大图
			seeImages(index, bigImgData) {
				let _this = this;
				uni.previewImage({
					urls: bigImgData,
					current: index,
				});
			},
			todetail(eventItem){
				//详情不显示按钮
				var pageType = 2;
				uni.navigateTo({
					url:'../detailPage/detailPage?eventItem='+ eventItem.eventId+'&pageType='+pageType
				})
			},
			back1() {
				uni.navigateBack({
					delta:1
				})
			},
			onReachBottom() {
				if (this.data.pageSize * this.data.pageNum >= this.total) {
					this.status= 'noMore';
					return;
				} else {
					this.data.pageNum = this.data.pageNum + 1;
					this.status= 'loading';
				}
			
				setTimeout(() => {
					this.getMycasehanding();
				}, 300);
			},
			onPullDownRefresh() {
				this.resetParam();
				this.status= 'loading';
				this.getMycasehanding();
			},
			resetParam() {
				this.data.pageSize = 5;
				this.data.pageNum = 1;
				this.total = 20;
				this.eventData = [];
			},
			getMycasehanding(){
				let _this = this,
					options = {},
					url = null;
				if (_this.type == 2) {
					url = geteventdeal;
				}else if(_this.type == 1){
					url = getMyeventCase;
				}else if(_this.type == 3){
					url = getEventlistBydu;
				}
				options = this.data
				uni.showLoading();
				url(options).then((res)=>{
					uni.hideLoading()
					if(res.code == 200){
						let eventData = res.rows;
						eventData.forEach((ele,index)=>{
							ele.smallImgData = [];
							ele.bigImgData = [];
							let images =  [];
							if(ele.beforeImg){
								images =  JSON.parse(ele.beforeImg);
								for (var i = 0; i < images.length; i++) {
									ele.smallImgData.push(this.imgUrl + images[i].path);
									ele.bigImgData.push(this.imgUrl + images[i].path);
								}
							}
						})
						this.eventData = [...this.eventData, ...eventData];
						this.total = res.total;
						if (this.data.pageSize * this.data.pageNum >= this.total) {
							this.status= 'noMore';
						} else {
							this.status= 'more';
						}
					}else{
						this.$toast.showToast(res.msg)
					}
					uni.stopPullDownRefresh();
				}).catch((err)=>{
					uni.stopPullDownRefresh();
					// console.log(err)
				})
			},
			searchEvent(){
				this.data.length ='';
				this.data.dealLimitTime = '';
				this.data.isTf = '';
				this.data.isJj = '';
				this.resetParam()
				this.getMycasehanding()
			},
			selectBtn(){
				this.isShows = !this.isShows
			},
			canal(){
				// length:'',
				// gdx:'34.230579',
				// gdy:'108.938228',
				// dealLimitTime:'', //是否超時
				// archivesTypeLeveThree:{
				// 	isTf:'',
				// 	isJj:'',
				// }
				this.data.length = this.sub==0?50:this.sub==1?100:150;
				this.data.dealLimitTime = this.sub1
				this.data.isTf = this.sub2
				this.data.isJj = this.sub3
				this.isShows = false
				this.resetParam()
				this.getMycasehanding()
			},
			reset(){
				this.sub = 0;this.sub0 = 0;this.sub1 = 0;this.sub2 = 0;this.sub3 = 0;
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.line {
		margin-bottom: 5px;
	}
	.taskBox{
		position: absolute;
		width: 500rpx;
		height: 380rpx;
		top: 150rpx;
		right: 20rpx;
		padding: 40rpx 20rpx;
		background-color: rgba(0,0,0,0.5);
		z-index: 99999;
		border-radius: 10rpx;
		color: #FFFFFF;
		.carial{
			width: 0;
			height: 0;
			border-right:10rpx solid transparent;
			border-left: 10rpx solid transparent;
			border-top: 10rpx solid transparent;
			border-bottom: 10rpx solid rgba(0,0,0,0.5);
			position: absolute;
			right: 20rpx;
			top: -20rpx;
		}
		.tewoBtn{
			margin-top: 20rpx;
			.reset{
				width: 146rpx;
				height: 46rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #4C8DEF;
				border-radius: 10rpx;
				font-size: 14px;
			}
		}
	}
	.addres{
		width: 31rpx;
		height: 34rpx;
	}
.top-tab {
	height: 60rpx;
	background:  #4188F2;
	position: fixed;
	top: 0rpx;
	left: 0rpx;
	right: 0rpx;
	margin-top: 0px;
	/* #ifdef H5 */
	margin-top: 44px;
	/* #endif */
	/* #ifdef APP-PLUS */
	top:70px;
	/* #endif */
}
.allCaseList{
	
	/* #ifdef H5 */
	padding: 220rpx 0 20rpx;
	/* #endif */
	/* #ifdef APP-PLUS */
	padding: 290rpx 0 20rpx;
	/* #endif */
	.caseList{
		margin: 0 44rpx;
		box-shadow: #b5cede 0px 0px 10px;
		background: white;
		border-radius: 20rpx;
		padding: 20rpx;
		height: 250rpx;
		display: flex;
		margin-bottom: 30rpx;
		.oimage{
			width: 190rpx;
			height: 190rpx;
			border: 1px solid #C0C0C0;
			margin-right: 20rpx;
			position: relative;
			image{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
			}
		}
		.case-right{
			flex: 1;
			.case-top{
				justify-content: space-between;
				flex: 1;
				.returns{
					background-color: $qj-color;
					height: 40rpx;
					line-height: 40rpx;
					color: #FFFFFF;
					padding: 0rpx 20rpx;
					border-radius: 30rpx 20rpx 20rpx 0rpx;
				}
			}
		}
	}
}
.uni-form {
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: 9;
		background: white;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: #b5cede 0px 0px 10px;
		margin: 0rpx 40rpx 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifdef APP-PLUS */
		top: 78px;
		/* #endif */
		.uni-form-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			border: 1px solid #397ADA;
			border-radius: 10rpx;
			padding: 0;
			.uni-input {
				flex: 1;
				height: 60rpx;
				border-radius:10rpx;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>
